<template>
    <el-form ref="vipFormRef" :model="vipForm" :rules="rules" label-width="100px">
        <el-form-item label="会员名称" prop="vipName">
            <el-input v-model="vipForm.vipName" placeholder="输入会员名称"></el-input>
        </el-form-item>
        <el-form-item label="R值折扣" prop="rValue">
            <el-input-number v-model="vipForm.rValue"
                            :step="0.1" :precision="1" :min="0" :max="1" :controls="false"
                            placeholder="1为原价 8折输入0.8" class="w100"></el-input-number>
        </el-form-item>
        <el-form-item label="E值下限" prop="eLowerValue">
            <el-input-number v-model="vipForm.eLowerValue"
                            :step="1" :precision="1" :min="0" :controls="false"
                            placeholder="输入E值下限" class="w100"></el-input-number>
        </el-form-item>
        <el-form-item label="E值上限" prop="eUpperValue">
            <el-input-number v-model="vipForm.eUpperValue"
                            :step="1" :precision="1" :min="0" :controls="false"
                            placeholder="输入E值上限" class="w100"></el-input-number>
        </el-form-item>
        <el-form-item label="会员级别" prop="level">
            <el-radio-group v-model="vipForm.level" class="user-dept">
                <el-radio v-for="item in levelList" :key="item.id" :value="item.id">
                    <span v-if="!item.img">{{ item.levelName }}</span>
                    <img v-else :src="item.img" alt="" style="width: 55px; height: 17px;">
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="会员权益" prop="equity">
            <el-checkbox-group v-model="vipForm.equity" class="user-dept equity-list">
                <el-checkbox v-for="item in equityList" :key="item.id" :value="item.id">
                    <el-tooltip
                        :disabled="!(item.id === 9 || item.id === 11 || item.id === 14)"
                        class="box-item"
                        effect="dark"
                        :content="item.name"
                        placement="bottom">
                        {{ item.name }}
                    </el-tooltip>
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    </el-form>
</template>
<script setup>
const vipForm = ref({
    vipName: '',
    rValue: undefined,
    eLowerValue: undefined,
    eUpperValue: undefined,
    level: '',
    equity: [],
});

const rules = ref({
    vipName: [
        { required: true, message: '请输入会员名称', trigger: 'blur' },
    ],
    rValue: [
        { required: true, message: '请输入R值折扣', trigger: 'blur' },
    ],
    eLowerValue: [
        { required: true, message: '请输入E值下限', trigger: 'blur' },
    ],
    eUpperValue: [
        { required: true, message: '请输入E值上限', trigger: 'blur' },
    ],
    level: [
        { required: true, message: '请选择会员级别', trigger: 'change' },
    ],
})
const levelList = ref([
    { id: 1, levelName: "普通", type: 'text' },
    { id: 2, levelName: "VIP1", img: '/src/assets/img/vip/vip1.png', type: 'img' },
    { id: 3, levelName: "VIP2", img: '/src/assets/img/vip/vip2.png', type: 'img' },
    { id: 4, levelName: "VIP3", img: '/src/assets/img/vip/vip3.png', type: 'img' },
    { id: 5, levelName: "VIP4", img: '/src/assets/img/vip/vip4.png', type: 'img' },
    { id: 6, levelName: "VIP5", img: '/src/assets/img/vip/vip5.png', type: 'img' },
]);
const equityList = ref([
    { id: 1, name: "蜂潮联盟" },
    { id: 2, name: "米豆专享" },
    { id: 3, name: "兑换R值" },
    { id: 4, name: "生日礼盒" },
    { id: 5, name: "端午福利" },
    { id: 6, name: "米豆兑现" },
    { id: 7, name: "米豆红包" },
    { id: 8, name: "春节福利" },
    { id: 14, name: "精致洗车服务" },
    { id: 9, name: "即刻行站免费充电2小时" },
    { id: 10, name: "APP补签卡" },
    { id: 11, name: "大型活动报名" },
    { id: 12, name: "连签365天" },
    { id: 13, name: "连签730天" },
]);
const reset = (type, data) => {
    for (const i in vipForm.value) {
        vipForm.value[i] = '';
    }
    vipForm.value.equity = [];
    if (type === 'edit') {
        vipForm.value = JSON.parse(JSON.stringify(data));
    }
}
const vipFormRef = ref(null);
const validate = () => {
    return new Promise(async(resolve, reject) => {
        await vipFormRef.value.validate((valid, fields) => {
            resolve(valid)
        })
    })
}
const getFormData = () => {
    return JSON.parse(JSON.stringify(vipForm.value))
}
const resetForm = () => {
    vipFormRef.value.resetFields()
}
defineExpose({
    getFormData,
    reset,
    validate,
    resetForm
})
</script>
<style lang="scss" scoped>
.user-dept {
    display: flex;
    flex-wrap: wrap;
    .el-radio,
    .el-checkbox {
        margin-right: 0;
        width: 33.3%;
    }
    .el-radio :deep(.el-radio__label){
        display: flex;
        align-items: center;
    }
}
.equity-list {
    .el-checkbox {
        :deep(.el-checkbox__label) {
            width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>